<template>
   <div class="s-confirm" :class="{ fade: fade }">
      <div class="wrapper">
         <div class="header">
            <h3>{{ props.title }}</h3>
            <s-icon
               type="icon-close"
               @click="props.cancelCallback()"
               class="mfont pointer"
            />
         </div>
         <div class="body">
            <s-icon :type="icon" :class="['bfont',`${type}-txt`]"/>
            <span>{{ props.text }}</span>
         </div>
         <div class="footer">
            <s-button @click="props.submitCallback()" type="primary" style="margin-left: 16px;"
               >确认</s-button
            >
            <s-button type="default" @click="props.cancelCallback()">取消</s-button>

         </div>
      </div>
   </div>
</template>

<script lang="ts" setup>
import { SIcon, SButton } from "@/components"
import { onMounted, ref, computed } from "vue"
import { IconTypes } from "@types"

// 属性
const props = defineProps({
   title: {
      type: String,
      default: "提示"
   },
   text: {
      type: String,
      default: ""
   },
   type: {
      type: String,
      default: "warn"
   },
   submitCallback: {
      type: Function
   },
   cancelCallback: {
      type: Function
   }
})
const icon = computed(() => {
   return `icon-${props.type}-fill` as IconTypes
})

const fade = ref(false)
onMounted(() => {
   // 当元素渲染完毕立即过渡的动画不会触发
   setTimeout(() => {
      fade.value = true
   }, 0)
})
</script>
<style scoped lang="less">
   .s-confirm {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 8888;
      background: rgba(0, 0, 0, 0);
      &.fade {
         transition: all 0.4s;
         background: rgba(0, 0, 0, 0.5);
      }
      .wrapper {
         width: 400px;
         background: @white;
         border-radius: @smallRadius;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -60%);
         opacity: 1;
         &.fade {
            transition: all 0.4s;
            transform: translate(-50%, -50%);
            opacity: 1;
         }
         .header {
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3 {
               cursor: default;
               font-size: @middleSize;
            }
         }
         .footer {
            padding: 0 20px;
            text-align: right;
            height: 42px;
         }
         .body {
            padding: 20px;
            display: flex;
            align-items: center;
            span {
               margin-left: 10px;
            }
         }
      }
   }
</style>
